<template>
  <el-dialog title="系统预估销量设置" width="720" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div>
      <el-form :inline="true" :model="formInline" labelPosition="top" class="form-inline">
        <div class="flex flex-wrap items-center gap-y-2">
          <span class="">加权日平均销量=</span>
          <template v-for="(item, i) in settingColumns" :key="i">
            <NumberRange :value="formInline[item.sales]" suffix="天" :min="0" :max="9999" class="w-[160px] mx-[4px]" @input="updateNumberRange(item.sales, $event)" />
            销量 / <el-input v-model="formInline[item.day]" placeholder="天" clearable class="w-80 mx-[4px] m" />*
            <el-input v-model="formInline[item.ratio]" placeholder="比例" clearable class="input_100 mx-[4px]"> <template #append>%</template></el-input>
            {{ i + 1 >= 3 ? "" : "+" }}
          </template>
        </div>
        <div>说明：如1-30天销量/30*50%+31-60天销量/30*30%+61-90天销量/30*20%，比例参数根据实际情况填写。</div>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" @click="save"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import NumberRange from "@/components/NumberRange/index.vue"
import { amazonSalesSetting, amazonSalesVolume } from "@/api/amazon"
import { ElMessage } from "element-plus"
const props = defineProps({})
const modelValue = ref(false)

const settingColumns = [
  { sales: "first_sales", day: "first_day", ratio: "first_ratio" },
  { sales: "second_sales", day: "second_day", ratio: "second_ratio" },
  { sales: "third_sales", day: "third_day", ratio: "third_ratio" },
]

const updateNumberRange = (field, val) => {
  formInline.value[field] = val
}
const formInline = ref({
  first_sales: {},
  second_sales: {},
  third_sales: {},
})

const open = (base_asin_id = []) => {
  modelValue.value = true
  amazonSalesVolume().then((res) => {
    let keys = ["first_sales", "second_sales", "third_sales"]
    keys.forEach((key) => {
      res.data[key] = { min: res.data[key]?.[0], max: res.data[key]?.[1] }
    })
    formInline.value = res.data
    console.log(formInline.value)
  })
}

const handleClose = () => {
  formInline.value = {}
  modelValue.value = false
}
const save = () => {
  let params = JSON.parse(JSON.stringify(formInline.value))
  params.first_sales = Object.values(params.first_sales)
  params.second_sales = Object.values(params.second_sales)
  params.third_sales = Object.values(params.third_sales)
  amazonSalesSetting(params).then((res) => {
    ElMessage.success(res.message)
    handleClose()
  })
}
defineExpose({
  open,
})
</script>
<style lang="scss" scoped>
.form-inline {
  .form-item {
    margin-right: 8px;
  }
  .w-80 {
    width: 60px;
  }
  .input_100 {
    width: 100px;
    :deep(.el-input-group__append) {
      width: 40px;
      // color: #333;
      // background: #fafafa;
      color: var(--base-text-color);
      background-color: var(--base-small-color);
    }
  }
}
</style>
